<!DOCTYPE html>
<html>
<head>
    <style>
        .box1
        {
            border: 5px solid black;
            font-size: 20px;
            width: 450px;
            background-color: #1cece1da;
        }
        /* --------------------------------- */
        div.box2
        {
            width: 200px;
            height: 100px;
            border:3px solid black;
            padding: 30px;
            margin: 30px;
            font-size: 20px;
        }
    </style>
    <meta charset="UTF-8" />
    <title>盒子模型</title>
</head>
<body>
    <div class="box1">
        <ol>
            <li>盒子模型属性:</li>
            <ol>
                <li>内容区:</li>
                <ol type="a">
                    <li>width(宽度)</li>
                    <li>height(高度)</li>
                </ol>
                <li>padding(内边距):清除内容周围的区域,颜色取决于内容颜色</li>
                <ol type="a">
                    <li>两个值:第一个(上下),第二个(左右)</li>
                </ol>
                <li>边框(border)</li>
                <ol type="a">
                    <li>第一个值:边框大小</li>
                    <li>第二个值:线的样式</li>
                    <li>第三个值:线的颜色</li>
                </ol>
                <li>外边距(margin)</li>
                <ol>
                    <li>一个值:四个方向</li>
                    <li>两个值:上下 左右</li>
                    <li>三个值:上 左右 下</li>
                    <li>四个值:上 右 下 左(顺时针)</li>
                </ol>
            </ol>
        </ol>
    <ol>
        <li type="none">margin和padding也可以分开设置:</li>
        <li type="none">比如:margin-left和padding-left等</li>
    </ol>
    </div>
    <!-- ---------------------------------------- -->
     <div class="box2">
        内边距颜色由内容背景颜色决定,外边距颜色是透明的
     </div>
</body>
</html>